﻿<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
<div id="main" style="width: 100%;height:100%;"></div>

<script src="~/Content/lib/echarts/echarts.min.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        var myChart = echarts.init($("#main")[0]);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '2018-2020年仓库需求面积',
                top: '10px',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['2018', '2019', '2020'],
                top: 'bottom'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value',
                name: '需求面积（万㎡）'
            },
            series: [
                {
                    name: '2018',
                    type: 'line',
                    data: [50.85, 30.68, 68.10, 29.86, 52.96, 55.34, 58.43, 107.06, 75.68, 66.69, 123.64, 102.87]
                },
                {
                    name: '2019',
                    type: 'line',
                    data: [98.33, 100.81, 137.88, 65.23, 71.35, 129.17, 97.34, 62.10, 71.07, 80.26, 73.56, 105.72]
                },
                {
                    name: '2020',
                    type: 'line',
                    data: [31.99, 53.21, 90.01, 48.61]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
</script>